<div class="subheader editor-toolbar" id="editor-header">
  <div class="fixed-container">
    <div class="btn-group">
      <div class="btn-toolbar pull-left" ng-controller="FormToolbarController" ng-cloak>
        <button
          id="{{ item.id }}"
          title="{{ item.title | translate }}"
          ng-repeat="item in items"
          ng-switch
          on="item.type"
          class="btn btn-inverse"
          ng-class="{'separator': item.type == 'separator'}"
          ng-disabled="item.type == 'separator' || item.enabled == false"
          ng-click="toolbarButtonClicked($index)"
        >
          <i
            ng-switch-when="button"
            ng-class="item.cssClass"
            class="toolbar-button"
            data-toggle="tooltip"
            title="{{ item.title | translate }}"
          ></i>

          <div ng-switch-when="separator" ng-class="item.cssClass"></div>
        </button>
      </div>
    </div>
    <div class="btn-group pull-right" ng-show="!secondaryItems.length">
      <div class="btn-toolbar pull-right" ng-controller="FormToolbarController">
        <button
          title="{{ item.title | translate }}"
          ng-repeat="item in secondaryItems track by $index"
          ng-switch
          on="item.type"
          class="btn btn-inverse"
          ng-class="{'separator': item.type == 'separator'}"
          ng-disabled="item.type == 'separator'"
          ng-click="toolbarSecondaryButtonClicked($index)"
          id="{{ item.id }}"
        >
          <i
            ng-switch-when="button"
            ng-class="item.cssClass"
            class="toolbar-button"
            data-toggle="tooltip"
            title="{{ item.title | translate }}"
          ></i>

          <div ng-switch-when="separator" ng-class="item.cssClass"></div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="inset fixed-container form-palette" ng-mousedown="cancelEditing($event)">
  <div class="col-sm-2" auto-height style="overflow: auto;">
    <ul style="font-family: Arial, Regular;font-size: 17px;color: #323437;list-style: none;padding:0;">
      <li
        class="stencil-item"
        ng-repeat="palletteElement in palletteElements"
        class="palette-entry"
        ng-model="draggedElement"
        id="{{ palletteElement.type }}"
        title="{{ palletteElement.title }}"
        dnd-draggable="palletteElement"
        dnd-type="'width-1'"
      >
        <img width="32" height="32" ng-src="{{ palletteElement.icon }}" />
        {{ palletteElement.title }}
      </li>
    </ul>
  </div>
  <div class="col-sm-10" style="height:100%; overflow: auto;">
    <div class="center-pane">
      <div class="content">
        <div class="header clearfix">
          <h2>{{ currentForm.name }}</h2>

          <div class="pull-left badge-wrapper">
            <span class="badge">{{ 'FORM-BUILDER.VERSION' | translate: currentForm }}</span>
            <span>&nbsp;&nbsp;{{ 'FORM-BUILDER.LAST-UPDATED' | translate: currentForm }}</span>
          </div>
        </div>
        <div class="tabs-wrapper">
          <div tab-control="tabs" active-tab="formBuilder.activeTab"></div>
          <button ng-show="formBuilder.activeTab == 'design'" title="{{item.name}}" ng-repeat="item in colNums" class="btn btn-clean" ng-click="setFormCols(item.num)"><i class="glyphicon" ng-class="item.icon"></i></button>
          <div
            id="canvasSection"
            class="content-canvas-wrapper"
            ng-show="formBuilder.activeTab == 'design'"
            ng-class="{'editing': editState.editing}"
          >
            <ul
              style="min-height:400px; width: 100%"
              class="form-canvas content-canvas"
              dnd-list="formItems"
              dnd-allowed-types="['width-1']"
              dnd-drop="onFieldDrop(item, formItems, event, index)"
              dnd-after-drop="afterDropField(item,formItems,event)"
            >
              <li
                ng-repeat="field in formItems track by field._guid"
                class="form-field-wrapper"
                ng-style="{width:colWidth}"
                ng-class="{'oneCol':(field.layout.row==1),'towCol':(field.layout.row == 2),'threeCol':(field.layout.row == 3),'fourCol':(field.layout.row == 4)}"
                dnd-draggable="field"
                dnd-effect-allowed="move"
                dnd-type="'width-1'"
                dnd-moved="onFieldMoved(field, formItems)"
              >
                <div
                  draggable="true"
                  id="{{ field._guid }}"
                  form-builder-element
                  form-element="field"
                  edit-state="editState"
                  col-nums="colNums"
                  drop="onFieldDrop(item, list, event, index)"
                  moved="onFieldMoved(item, list)"
                  class="canvas-element"
                ></div>
              </li>
            </ul>
          </div>

          <div ng-show="formBuilder.activeTab == 'outcome'" class="detail-wrapper">
            <div class="well">
              <p>{{ 'FORM-BUILDER.OUTCOMES.DESCRIPTION' | translate }}</p>

              <div class="radio">
                <label>
                  <input type="radio" name="outcome" ng-value="false" ng-model="model.useOutcomes" />
                  {{ 'FORM-BUILDER.OUTCOMES.NO-OUTCOMES-OPTION' | translate }}
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="outcome" ng-value="true" ng-model="model.useOutcomes" />
                  {{ 'FORM-BUILDER.OUTCOMES.OUTCOMES-OPTION' | translate }}
                </label>
              </div>
            </div>
            <div ng-if="model.useOutcomes">
              <h4>{{ 'FORM-BUILDER.OUTCOMES.POSSIBLE-OUTCOMES' | translate }}</h4>

              <div class="clearfix" ng-repeat="outcome in currentOutcomes track by $index" style="margin-bottom:5px">
                <div class="col-xs-8">
                  <input
                    type="text"
                    class="form-control"
                    placeholder="{{ 'FORM-BUILDER.OUTCOMES.NEW-OUTCOME-PLACEHOLDER' | translate }}"
                    ng-model="outcome.name"
                  />
                </div>
                <div class="col-xs-2">
                  <button
                    style="width:110px"
                    ng-show="$index > 0"
                    class="btn btn-default"
                    ng-click="removeOutcome($index)"
                  >
                    {{ 'FORM-BUILDER.OUTCOMES.REMOVE' | translate }}
                  </button>
                </div>
                <div class="col-xs-2">
                  <button
                    style="width:110px"
                    ng-show="($index + 1) === currentOutcomes.length"
                    class="btn btn-default"
                    ng-click="addOutcome()"
                  >
                    {{ 'FORM-BUILDER.OUTCOMES.ADD' | translate }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
